<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8"/>
    <title>Kepler.gl embedded map</title>

    <!--Uber Font-->
    <link rel="stylesheet" href="https://d1a3f4spazzrp4.cloudfront.net/kepler.gl/uber-fonts/4.0.0/superfine.css">

    <!--MapBox css-->
    <link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.42.0/mapbox-gl.css" rel="stylesheet">

    <!-- Load React/Redux -->
    <script src="https://unpkg.com/react@16.8.4/umd/react.production.min.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16.8.4/umd/react-dom.production.min.js" crossorigin></script>
    <script src="https://unpkg.com/redux@3.7.2/dist/redux.js" crossorigin></script>
    <script src="https://unpkg.com/react-redux@5.1.1/dist/react-redux.min.js" crossorigin></script>
    <script src="https://unpkg.com/styled-components@4.1.3/dist/styled-components.min.js" crossorigin></script>

    <!-- Load Kepler.gl-->
    <script src="https://unpkg.com/kepler.gl@1.1.1/umd/keplergl.min.js"></script>
    <!--If you want to load the build from filepath -->
    <!--<script src="../../umd/keplergl.min.js"></script>-->

    <style type="text/css">
      body {margin: 0; padding: 0; overflow: hidden;}
    </style>

    <!--MapBox token-->
    <script>
      /**
       * Provide your MapBox Token
       **/
      const MAPBOX_TOKEN = 'PROVIDE_MAPBOX_TOKEN';
      const WARNING_MESSAGE = 'Please Provide a Mapbox Token in order to use Kepler.gl. Edit this file and fill out MAPBOX_TOKEN with your access key';
    </script>

  </head>
  <body>
    <!-- We will put our React component inside this div. -->
    <div id="app">
      <!-- Kepler.gl map will be placed here-->
    </div>

    <!-- Load our React component. -->
    <script>
      /* Validate Mapbox Token */
      if ((MAPBOX_TOKEN || '') === '' || MAPBOX_TOKEN === 'PROVIDE_MAPBOX_TOKEN') {
        alert(WARNING_MESSAGE);
      }

      /** STORE **/
      const reducers = (function createReducers(redux, keplerGl) {
        return redux.combineReducers({
          // mount keplerGl reducer
          keplerGl: keplerGl.keplerGlReducer
        });
      }(Redux, KeplerGl));

      const middleWares = (function createMiddlewares(keplerGl) {
        return keplerGl.enhanceReduxMiddleware([
          // Add other middlewares here
        ]);
      }(KeplerGl));

      const enhancers = (function craeteEnhancers(redux, middles) {
        return redux.applyMiddleware(...middles);
      }(Redux, middleWares));

      const store = (function createStore(redux, enhancers) {
        const initialState = {};

        return redux.createStore(
          reducers,
          initialState,
          redux.compose(enhancers)
        );
      }(Redux, enhancers));
      /** END STORE **/

      /** COMPONENTS **/
      const KeplerElement = (function (react, keplerGl, mapboxToken) {
        return function(props) {
          return react.createElement(
            'div',
            {style: {position: 'absolute', left: 0, width: '100vw', height: '100vh'}},
            react.createElement(
              keplerGl.KeplerGl,
              {
                mapboxApiAccessToken: mapboxToken,
                id: 'map',
                width: props.width || 1200,
                height: props.height || 800
              }
            )
          )
        }
      }(React, KeplerGl, MAPBOX_TOKEN));

      const app = (function createReactReduxProvider(react, reactRedux, KeplerElement) {
        return react.createElement(
          reactRedux.Provider,
          {store},
          react.createElement(KeplerElement, null)
        )
      }(React, ReactRedux, KeplerElement));
      /** END COMPONENTS **/

      /** Render **/
      (function render(react, reactDOM, app) {
        reactDOM.render(app, document.getElementById('app'));
      }(React, ReactDOM, app));

    </script>

    <!-- The next script will show how to interact directly with Kepler map store -->
    <script>
      /**
       * Customize map.
       * Interact with map store to customize data and behavior
       */
      (function customize(keplerGl, store) {
        // store.dispatch(keplerGl.toggleSplitMap());
      }(KeplerGl, store))
    </script>
  </body>
</html>
